<template>
    <div class="relative overflow-x-auto">
        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                    <th scope="col" class="px-6 py-3">序号</th>
                    <th scope="col" class="px-6 py-3">名字</th>
                    <th scope="col" class="px-6 py-3">年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="p in list" :key="p.id"
                    class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        {{ p.id }}
                    </th>
                    <td class="px-6 py-4">
                        {{ p.name }}
                    </td>
                    <td class="px-6 py-4">
                        {{ p.age }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

</template>

<script setup lang="ts">
import type { PersonList } from '@/types';

// import { defineProps } from 'vue';

// 1. 只接收list
// defineProps(['list'])

// 2. 接收list，且限制类型
// defineProps<{ list: PersonList }>()

// 3. 接收list，限制类型，限制必要性，指定默认值
withDefaults(defineProps<{ list: PersonList }>(), {
    list: () => [{ id: 1, name: '张三', age: 18 }]
})

</script>